<template>
    <BaseComposite :config="config" :refreshEditor="refreshEditor" @updateData="updateData">
                <el-link href="https://gitee.com/renlin901017/rl-plus-docs/blob/master/docs/BasePage.md" target="_blank" type="primary">更多用法请参考文档</el-link>
        <!-- template -->
        <div class="item template">
            <p class="label">~ 使用 ~</p>
            <el-tooltip
                class="box-item"
                effect="dark"
                content="点击可复制"
                placement="top-start"
            >
                <p @click="copyText(BaseHtml)">{{BaseHtml}}</p>
            </el-tooltip>
        </div>
        <!-- 基础用法 -->
        <BaseItem label="基础用法" :text="BaseScript">
            <BasePage :config="BaseConfig" @change="change"></BasePage>
        </BaseItem>
        <!-- 其他用法 -->
        <BaseItem label="其他用法" :text="OtherScript">
            <BasePage :config="OtherConfig" @change="change"></BasePage>
        </BaseItem>
        <!-- 自定义设置 -->
        <div class="item">
            <el-tooltip
                class="box-item"
                effect="dark"
                content="点击可复制"
                placement="top-start"
            >
                <p class="custom" @click="copyText(JsonToString(config))">自定义设置</p>     
            </el-tooltip>
            <BasePage :key="config" :config="config" @change="change"></BasePage>
        </div>  
        <template #props>
            <BaseForm :config="formConfig" ref="myForm">                
                <div class="btns">                    
                    <el-button type="primary" @click="useConfig" :auto-insert-space="true">应用</el-button>
                    <el-button @click="reset" :auto-insert-space="true">重置</el-button>
                </div>
            </BaseForm>         
        </template>
    </BaseComposite>
</template>
<script lang="ts" setup>
import { ref, isRef, reactive,nextTick } from 'vue';
import BaseComposite from '@/components/BaseComposite';
import BaseItem from '@/components/BaseItem';
import { ElButton, ElTooltip, ElLink } from "element-plus";
import { BasePage, BasePageType, BaseForm,BaseFormType, BaseFormItemEleType, GroupComsType, InputValue } from 'rl-plus';
import { deepClone, JsonToString } from 'rl-utils';
import { copyText } from '../../utils/index';
const BaseHtml = `<BasePage :config="config" @btnClick="btnClick" />`
// 基础用法
const BaseScript = `
import { ref} from 'vue';
import { BasePage, BasePageType} from 'rl-plus';
const config = ref<BasePageType>({
    pageSize: 10,
    currentPage: 1,
    total: 100,
    pageSizes: [10, 20, 50],
    layout:'total,sizes,prev,pager,next'
})
`
const BaseConfig=ref<BasePageType>({
    pageSize: 10,
    currentPage: 1,
    total: 100,
    pageSizes: [10, 20, 50],
    layout:'total,sizes,prev,pager,next'
})
// 其他用法
const OtherScript = `
import { ref} from 'vue';
import { BasePage, BasePageType} from 'rl-plus';
const config = ref<BasePageType>({
    pageSize: 10,
    currentPage: 1,
    total: 100,
    pageSizes: [10, 20, 50],
    layout:'total,sizes,prev,pager,next',
    class:"item-custom",
    style:"padding:10px;background:#f5f5f5",
})
`
const OtherConfig=ref<BasePageType>({
    pageSize: 10,
    currentPage: 1,
    total: 100,
    pageSizes: [10, 20, 50],
    layout: 'total,sizes,prev,pager,next',
    class:"item-custom",
    style:"padding:10px;background:#f5f5f5",
})
// 初始化
const config = ref<BasePageType>({
    pageSize: 20,
    currentPage: 1,
    total: 100,
    pageSizes:[10,20,50]
})
// 备份数据
const initData = deepClone(config.value)
// 刷新JsonEditor
const refreshEditor = ref(true)
// form表单
const formConfig = reactive<BaseFormType>({
    eleType: GroupComsType.BASEFORM,
    labelWidth:300,
    config: [{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'background',
            value:false,
            label: 'background',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            type:InputValue.INT,
            prop: 'pageSize',
            value:10,
            label: '每页显示条目个数',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            type:InputValue.INT,
            prop: 'defaultPageSize',
            value:'',
            label: '每页显示条目数的初始值',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            type:InputValue.INT,
            prop: 'total',
            value:0,
            label: '总条目数',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            type:InputValue.INT,
            prop: 'pageCount',
            value:0,
            label: '总页数',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            type:InputValue.INT,
            prop: 'pagerCount',
            value:7,
            label: '设置最大页码按钮数',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            type:InputValue.INT,
            prop: 'currentPage',
            value:1,
            label: '当前页数'
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            type:InputValue.INT,
            prop: 'defaultCurrentPage',
            value:0,
            label: '当前页数的初始值'
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'layout',
            value:'prev, pager, next, jumper, ->, total',
            label: '组件布局',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'popperClass',
            value:'',
            label: '每页显示个数选择器的下拉框类名',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'prevText',
            value:'',
            label: '替代图标显示的上一页文字',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'nextText',
            value:'',
            label: '替代图标显示的下一页文字',
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            // prop: 'disabled',
            prop: 'totaldisabled',
            value:false,
            label: '是否禁用分页',
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'hideOSinglePage',
            value:false,
            label: '只有一页时是否隐藏',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'class',
            value:'',
            label: '类'
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'style',
            value:'',
            label: '样式'
        },
    ]
})
const myForm=ref(null)

const useConfig = () => {
    if (myForm.value) { 
        let newData = deepClone(myForm.value.newData)
        const dataKeys = Object.keys(newData)
        dataKeys.map(item => { 
            if (!newData[item]) { 
                delete newData[item]
            }
        })
        config.value = { ...config.value, ...newData }
        refreshEditor.value = false
        nextTick(() => {
            refreshEditor.value = true
        })
    }
}
const reset = () => { 
    config.value = initData
    refreshEditor.value = false
    nextTick(() => {
        myForm.value.resetForm()
        refreshEditor.value = true
    })
}
// JsonEditor数据同步
const updateData = (e) => { 
    config.value=isRef(e)&&e.value||e
}
const change = (e) => { 
    console.log(e)
}
</script>
<style lang="scss" scoped>
@import "../../assets/css/index.scss";
    .tip{
        color: #999;
        text-align: center;
        padding: 10px;
    }
    .btns{
        display: flex;
        justify-content: center;
    }
</style>